<template>
	<!-- <view class="bgcolor" style="position: relative;">
		<header-top :messageInfo="{typeFlag:true,message:'账户余额'}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="top_right_text" @click="jumpurl('/pages/mypage/moneydetail/moneydetail')">资金明细</view>
				</view>
			</view>
		</header-top>
		<view class="backcard">
			<view class="cards">
				<view class="" style="position: absolute;left: 0; right: 0;;z-index: -1;">
					<image src="@/static/imags/mypage/bg01.png" style="height: 350rpx;width: 100%;"> </image>
				</view>
				<view class="mar06" style="margin: 30rpx 10rpx;font-size: 30rpx;">总账户余额</view>
				<view class="mar06" style="font-size: 50rpx;">{{moneyinfo.zong}}</view>
				<view class="mar06" style="font-size: 30rpx;">账户余额（元）</view>
			</view>
			<view class="cards">
				<view class="" style="position: absolute;left: 0; right: 0;;z-index: -1;">
					<image src="@/static/imags/mypage/bg02.png" style="height: 350rpx;width: 100%;"> </image>
				</view>
				<view class="mar06" style="margin: 30rpx 10rpx;font-size: 30rpx;">团队余额</view>
				<view class="mar06" style="font-size: 50rpx;">{{moneyinfo.team}}</view>
				<view class="mar06" style="font-size: 30rpx;">账户余额（元）</view>
			</view>
			<view class="cards">
				<view class="" style="position: absolute;left: 0; right: 0;;z-index: -1;">
					<image src="@/static/imags/mypage/bg03.png" style="height: 350rpx;width: 100%;"> </image>
				</view>
				<view class="mar06" style="margin: 30rpx 10rpx;font-size: 30rpx;">个人账户余额</view>
				<view class="mar06" style="font-size: 50rpx;">{{moneyinfo.my}}</view>
				<view class="mar06" style="font-size: 30rpx;">账户余额（元）</view>
			</view>
			<view class="cards">
				<view class="" style="position: absolute;left: 0; right: 0;;z-index: -1;">
					<image src="@/static/imags/mypage/bg04.png" style="height: 350rpx;width: 100%;"> </image>
				</view>
				<view class="mar06" style="margin: 30rpx 10rpx;font-size: 30rpx;">奖金</view>
				<view class="mar06" style="font-size: 50rpx;">{{moneyinfo.jiangjin}}</view>
				<view class="mar06" style="font-size: 30rpx;">账户余额（元）</view>
			</view>
			
		</view>
		<view style="padding: 0 70rpx;position: static;left: 0;bottom: 0rpx; width: 100%;box-sizing: border-box;padding-bottom: 30rpx;" v-if="backCard.length">
			<view class="buttonStyle flexcenter" @click="jumpurl('./withdraw')"> 
				提现
			</view>
		</view>
	</view> -->
	<view class="content" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'账户余额'}"></header-top>
		<view class="toububjt">
			<view class="mainContext">
				<!-- <view class="header">
					<view class="count">{{userinfo.money==null?0:userinfo.money}}</view>
					<view class="name">账户余额(元)</view>
					<view class="margin-top">
						<view class="tixian" @click="tixian">提现</view>
					</view>
				</view> -->
				<view class="header">
					<view class="title">账户余额：{{userinfo.money}}</view>
					<view class="tixian" style="color: #1ED76D;" @click="tixian">提现</view>
				</view>
				<view class="jifen">
					<view class="text">总收入：<text style="color: #1ED76D;">{{userinfo.total_sr_price}}</text></view>
					<view class="text">总排名：<text style="color: red;">{{userinfo.rank}}</text></view>
				</view>
				<view class="jifen">
					<view class="text">个人总收入：{{userinfo.total_self_sr_price}}</view>
					<view class="text">团队总收入：{{userinfo.total_team_sr_price}}</view>
				</view>
				<view class="yue">
					<view class="text">总提现金额：{{userinfo.total_tx_price}}</view>
					<view class="text" style="margin-right: 60rpx;">总奖金：{{userinfo.total_yj_sr_price}}</view>
				</view>
			</view>
		</view>
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="title1">余额明细</view>
				<view class="title1" @click="show=true">筛选</view>
			</view>
			<!-- <view class="placeholderimg zwtimg" style="margin-top: 200rpx;" v-if="!list.data.length">
				<view class="placeholderimg">
					<image src="/static/image/bg-icons/placeholderimg.png" mode=""></image>
				</view>
			</view> -->
			<!-- 明细： -->
			<view class="yue_list">
				<view class="yue_list_item" v-if="list.data.length" v-for="item in list.data" :key="item.id">
					<view class="line_one">
						<view class="word">{{item.memo}}</view>
						<text class="money">{{item.money}}</text>
					</view>
					<view class="line_two">{{item.createtime_text}}</view>
				</view>
			</view>
		</view>
		<!-- 筛选弹出层 -->
		<u-popup :show="show" @close="show=false" mode="bottom" :round="10">
			<view class="mainpadding">
				<view class="flexcenter margin_top2">
					<view class="shijianbtn margin_right3" @click="zshow=true">{{startime}}</view>
					<view class="xian margin_right3"></view>
					<view class="shijianbtn" @click="yshowClick">{{endtime}}</view>
				</view>
				<u-datetime-picker :show="zshow" @confirm="zshowconfirm" v-model="value1" mode="date"
					@cancel="zshow= false"></u-datetime-picker>
				<u-datetime-picker :show="yshow" @confirm="yshowconfirm" v-model="value2" mode="date"
					@cancel="yshow= false" :minDate="minDate"></u-datetime-picker>
				<view class="bigbtn margin_top" @click="confirm">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				userinfo: {},
				backCard: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				pageShow:false,
				show: false,
				zshow: false,
				yshow: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				startime: "开始时间",
				endtime: "结束时间",
				minDate: "",
				start_time: "",
				end_time: ""
			}
		},
		onShow() {
			this.getinfo()
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this
				httpRequest.request('/employeesapi/user/getUserMoneyLog', 'GET', {
					page: page || 1,
					limit: this.limit,
					start_time: this.start_time,
					end_time: this.end_time
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list.data = resList.data;
						}
						// _this.pageShow=true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getinfo() {
				httpRequest.request('/employeesapi/user/index', 'GET', {}).then(res => {
					this.userinfo = res.data
					this.pageShow=true
				})
			},
			date(data) {
				let time = new Date(data);
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				month = month < 10 ? '0' + month : month
				let day = time.getDate();
				day = day < 10 ? '0' + day : day
				return year + '-' + month + '-' + day
			},
			clearTime(){
				this.startime="开始时间"
				this.endtime="结束时间"
				this.minDate=""
			},
			yshowClick() {
				if (!this.minDate) {
					httpRequest.toast("请先选择开始时间！");
					return false
				}
				this.yshow = true
			},
			zshowconfirm(e) { //开始时间
				this.zshow = false
				this.minDate = e.value
				this.startime = this.date(e.value)
				this.start_time = this.startime
			},
			yshowconfirm(e) { //结束时间
				this.yshow = false
				this.endtime = this.date(e.value)
				this.end_time = this.endtime
			},
			confirm() {
				if (!this.start_time) {
					httpRequest.toast("请选择开始时间！");
					return false
				}
				if (!this.end_time) {
					httpRequest.toast("请选择结束时间！");
					return false
				}
				this.show = false
				this.clearTime()
				this.init()
			},
			tixian(){
				uni.navigateTo({
					url:"/pages/mypage/withdrawaldetail/withdrawaldetail"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.shijianbtn {
		padding: 20rpx 65rpx;
		background: #F7F9FA;
		border-radius: 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.xian {
		width: 22rpx;
		height: 0rpx;
		background-color: #999999;
		border: 1rpx solid #999999;
	}

	.bigbtn {
		background-color: #3476fe;
		border-radius: 41rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 82rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.jifen {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.yue {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.count {
		margin-top: 76rpx;
		font-size: 80rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FFFFFF;
	}

	.name {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 7rpx;
	}

	.tixian {
		width: 78rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 40rpx;
		padding: 13rpx 69rpx;
		border: 1rpx solid #fff;
		border-radius: 10rpx;
	}

	.toububjt {
		padding: 60rpx 0;
		// height: 408rpx;
		background-color: #3476fe;
		display: flex;
		// align-items: center;

		.xiaobtext {
			font-size: 26rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			color: #FFFFFF;
		}

		.mainContext {
			width: 100vw;
			padding: 0 40rpx;
			color: #fff;

			.title {
				font-size: 40rpx;
				font-weight: bold;
			}

			.text {
				font-size: 36rpx;
				margin-top: 40rpx;
				text-align: left;
			}
		}
	}

	.title1 {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin-top: 30rpx;
		// background: url("/static/image/my/jianbian.png") no-repeat;
		// background-position: left bottom;
		// background-size: 100%;
		// box-sizing: border-box;
		// display: inline-block;
	}

	.yue_list {
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 16rpx;
	}

	.yue_list_item {
		padding: 30rpx;
		border-bottom: 1rpx solid #fcfcfc;
	}

	.yue_list_item:last-child {
		border-bottom: none;
	}

	.line_one {
		display: flex;
		justify-content: space-between;
	}

	.word {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.money {
		font-size: 32rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: RGBA(255, 117, 16, 1);
	}

	.line_two {
		margin-top: 11rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	// .backcard{
	// 	padding:0 30rpx 30rpx 30rpx;

	// }
	// .cards {
	// 	position: relative;
	// 	z-index: 3;
	// 	// border: 2rpx solid #000;
	// 	margin: 40rpx auto;
	// 	box-sizing: border-box;
	// 	height: 340rpx;   
	// 	padding: 40rpx;  

	// }
	// .cards:nth-child(1){
	// 	margin-top: 0;
	// }
	// .cards:last-child{
	// 	margin-bottom: 100rpx;
	// }

	// .mar06 {
	// 	margin: 10rpx;
	// 	color: #fff;
	// }
</style>